<template>
  <div id="root">

<Top><p>在线支付</p></Top>
    <div class="shijian-roop">
      <p class="shi-p">支付剩余时间</p>
      <div class="shijian">
      <van-count-down :time="time" />
      </div>
    </div>
    <p class="ppp">选择支付方式</p>

    <van-radio-group v-model="radio">
      <div class="zhifu"> <div><van-icon name="alipay" color="#027aff" size="50px" /></div><div class="zhifubao">支付宝</div><van-radio checked-color="#07c160" name="1"></van-radio></div>
      <div class="zhifu"> <div><van-icon name="wechat" color="#07c160" size="50px"/></div><div class="zhifubao">微信</div><van-radio checked-color="#07c160" name="2"></van-radio></div>
    </van-radio-group>
    <div class="button">
    <van-button type="primary" @click="zhifu()" block>确认支付</van-button>
    </div>
    <div @click="tiao()">
      <Tan><P>当前环境无法支付,请打开官方app进行付款</P></Tan>
    </div>


  </div>
</template>

<script>
import Top from "@/components/Top";
import Tan from "@/components/Tan";
export default {
  name: "DDpayment",
  components: {Tan, Top},
  created() {
    this.dingdan=JSON.parse(localStorage.dingdan)
  },
  data() {
    return {
      time: 1 * 16 * 60 * 1000,
      radio:1,
      guan:false,
      dingdan:[],

    }
  },
  methods: {
    tiao() {
      this.guan=false
      this.$router.push("/indent")
    },
    zhifu(){
      this.$store.commit("clicktan",true);
      console.log(this.$store.state.corder);
      let ding={shop:this.$store.state.shop,foods:this.$store.state.corder,sum:this.$store.state.sum}
      console.log(ding);
      this.dingdan.push(ding)
      localStorage.dingdan=JSON.stringify(this.dingdan);

    }
  },
}
</script>

<style scoped>
.shijian{
  text-align: center;
  color: #333;
  margin: .3rem 0 1rem;
}
.shi-p{
  text-align: center;
  font-family: Microsoft Yahei;
  font-size: .6rem;
  color: #666;
  margin-top: 1rem;
}
.shijian-roop{
  background-color: #fff;
  padding: 2.7rem;
  text-align: center;
}
.zhifu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem .7rem;
  line-height: 2.6rem;
  background-color: #fff;
  border-bottom: .025rem solid #f5f5f5;
}
.zhifubao{
  width: 70%;
}
.button{
  margin: 0 .7rem;
  line-height: 1.8rem;
  border-radius: .2rem;
  margin-top: .5rem;
}
.ppp{
  background-color: #f1f1f1;
  padding: 0 .7rem;
  font-size: .7rem;
  color: #666;
  line-height: 2rem;
}
/deep/.van-count-down {
  color: #323233;
  font-size: 40px;
  line-height: 40px;
}
</style>